<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展会客户信息</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=c7eda8a8">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        .content .select2 {
            margin-bottom: 10px !important;
        }

        .content .area {
            display: none;
        }

        .content .area td {
            border-style: dashed;
            background-color: #FBFBFB;
        }

        .content td.region {
            color: #95C0F4;
            cursor: pointer;
            text-align: left;
        }

        .table-detail {
            width: 90%;
            margin: auto;
            margin-top: 30px !important;
            border-left: 1px solid #CECFCF;
            border-top: 1px solid #CECFCF;
        }

        .table-detail td {
            border-right: 1px solid #CECFCF;
            border-bottom: 1px solid #CECFCF;
        }

        .table-detail .tdbg {
            background-color: #E1E2E3;
        }

        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
            border: 0px !important;
        }

        .table-detail input {
            text-align: center;
        }

    </style>
</head>
<body>
<div class="layout" style="left:0px;top:0px;right:0px;bottom:0px;" id="edit">
    <div class="center" style="overflow:auto;overflow-x:hidden;">
        <table class="table-detail">
            <tr>
                <td style="width: 25%" class="tdbg">客户电话</td>
                <td style="width: 25%">
                    <input type="text" v-model="customerInfo.customerTel"
                           @blur="getCustomerInfo(customerInfo.customerTel)">
                </td>
                <td style="width: 25%" class="tdbg">客户姓名</td>
                <td style="width: 25%">
                    <input type="text" v-model="customerInfo.customerName">
                    <input type="hidden" v-model="customerInfo.customerId">
                </td>
            </tr>
            <tr>
                <td class="tdbg">意向机型</td>
                <td v-for="(item,i) in customerInfo.intentionModelList">
                    <select v-model="item.eqipmentModelId" v-select2="" class="form-control select2" style="width: 98%">
                        <option v-for="option in equipmentModelList" :value="option.id">
                            {{option.name}}
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td class="tdbg">报价(万)</td>
                <td v-for="(item,i) in customerInfo.intentionModelList">
                    <input type="text" v-model="item.quote" name="quote">
                </td>
            </tr>
            <tr>
                <td class="tdbg">心理价格(万)</td>
                <td v-for="(item,i) in customerInfo.intentionModelList">
                    <input type="text" v-model="item.acceptPrice" name="acceptPrice">
                </td>
            </tr>
            <tr>
                <td class="tdbg">定金状态</td>
                <td>
                    <select v-model="customerInfo.depositStatus" v-select2="" class="form-control select2"
                            style="width: 98%">
                        <option v-for="option in depositStatus" :value="option.id">{{option.name}}</option>
                    </select>
                </td>
                <td class="tdbg">定金金额(万)</td>
                <td>
                    <input type="text" v-model="customerInfo.deposit" name="deposit">
                </td>
            </tr>
            <tr>
                <td class="tdbg">陪同销售</td>
                <td>
                    <input type="text" v-model="customerInfo.salerName">
                </td>
                <td class="tdbg">出行方式</td>
                <td>
                    <select v-model="customerInfo.travelModel" v-select2="" class="form-control select2"
                            style="width: 98%">
                        <option v-for="option in travelModel" :value="option.id">{{option.name}}</option>
                    </select>
                </td>

            </tr>
            <tr>
                <td class="tdbg">参会人数</td>
                <td>
                    <input type="text" v-model="customerInfo.participationNum" name="participationNum">
                </td>
                <td class="tdbg">入住人数</td>
                <td>
                    <input type="text" v-model="customerInfo.stayNum" name="stayNum">
                </td>
            </tr>
            <tr>
                <td class="tdbg">
                    到达时间
                </td>
                <td>
                    <input type="text" v-model="customerInfo.arrivalsTime" @focus="showDatePicker($event)">
                </td>
                <td v-if="currentUser.roleName =='区域支持' " class="tdbg">转到销售</td>
                <td v-if="currentUser.roleName =='区域支持' ">
                    <select v-model="customerInfo.createUserId" class="form-control select2 toSeller"
                            style="width: 98%">
                        <option v-for="option in salerList" :value="option.userId">
                            {{option.userName}}
                        </option>
                    </select>
                </td>
                <td v-if="currentUser.roleName !='区域支持' " class="tdbg"></td>
                <td v-if="currentUser.roleName !='区域支持' "></td>
            </tr>
        </table>
        <br/>
    </div>
    <div class="south" style="text-align:center;">
        <input type="button" value="保存" class="btn oaBtn btn-sm" @click="save()"/>
        <!--<input type="button" style="margin-left:20px;" value="关闭" class="btn oaBtn btn-sm" @click="close()">-->
    </div>
</div>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=3ad7b5d4"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=e424e6fc"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.min.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            var options = binding.value || {};

            $(el).select2(options).on("select2:select", function (e) {
                // v-model looks for
                //  - an event named "change"
                //  - a value with property path "$event.target.value"
                el.dispatchEvent(new Event('change', {target: e.target})); //说好的双向绑定，竟然不安套路
            });
        },
        update: function (el, binding, vnode) {
            $(el).trigger("change");
        }
    });

    var edit = new Vue({
        el: "#edit",
        data: {
            currentUser: getCurrentUser(),
            pageType: "add",
            depositStatus: [],
            travelModel: [],
            customerInfo: {
                id: "0",
                customerName: "",
                customerTel: "",
                customerId: "",
                exhibitionId: "",
                salerName: "",
                depositStatus: 0,
                deposit: "",
                travelModel: 0,
                arrivalsTime: "",
                participationNum: "",
                stayNum: "",
                createUserId: getCurrentUser().id,
                toSalerName: "",
                trackStatus: "1",
                intentionModelList: [
                    {
                        eqipmentModelId: "",
                        quote: "",
                        acceptPrice: ""
                    },
                    {
                        eqipmentModelId: "",
                        quote: "",
                        acceptPrice: ""
                    },
                    {
                        eqipmentModelId: "",
                        quote: "",
                        acceptPrice: ""
                    }
                ]
            },
            equipmentModelList: [],
            salerList: []
        },
        methods: {
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.customerInfo.arrivalsTime = dp.cal.getNewDateStr();
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            getCustomerInfo: function (customerTel) {
                var that = this;
                //设备型号
                $.wyui.postMethod(urlConfig.crm.customer.getCustomerByTel, {
                    tel: customerTel
                }, function (data) {
                    if (data) {
                        that.customerInfo.customerId = data.id;
                        that.customerInfo.customerName = data.name;
                    } else {
                        that.customerInfo.customerId = '';
                        that.customerInfo.customerName = '';
                    }
                });
            },
            save: function () {
                var selectedSeller = $(".toSeller").find("option:selected").val();
                if (this.customerInfo.customerName == "") {
                    alert("请填写客户姓名");
                    return;
                }
                if (this.customerInfo.customerTel == "") {
                    alert("请填写客户电话");
                    return;
                }
                if (this.currentUser.roleName == '区域支持' && selectedSeller == undefined) {
                    alert("请选择转到销售")
                    return;
                }
                $.wyui.postMethod(urlConfig.crm.exhibition.saveExihibitionCustomer, trimRN(this.customerInfo), function (data) {
                    alert("操作成功");
                    parent.app.refresh();
                    api.close();
                });
            },
            close: function () {
                api.close();
            }
        },
        mounted: function () {
            //页面操作状态
            this.pageType = $.wyui.page.urlParams.pageType;
            this.id = $.wyui.page.urlParams.id;
            this.customerInfo.exhibitionId = $.wyui.page.urlParams.exhibitionId;
            var that = this;
            //设备型号
            $.wyui.postMethod(urlConfig.crm.exhibition.getModelList, {}, function (list) {
                that.equipmentModelList = list.records;
            }, true);
            //编辑数据
            if (this.pageType == "edit") {
                console.log(that.id);
                $.wyui.postMethod(urlConfig.crm.exhibition.getExihibitionCustomerById, {
                    id: that.id
                }, function (data) {
                    that.customerInfo = data.exihibitionCustomer;
                    that.customerInfo.arrivalsTime = data.exihibitionCustomer.arrivalsTime.substring(0, 10);
                    that.customerInfo.customerName = data.customerInfo.name;
                    that.customerInfo.customerTel = data.customerInfo.tel;
                    that.customerInfo.intentionModelList = data.intentionModelList;
                }, true);
            }
            that.depositStatus = [{"id": 1, "name": "已交"}, {"id": 2, "name": "肯定交"}, {"id": 3, "name": "不确定"}, {
                "id": 4,
                "name": "不交"
            }];
            that.travelModel = [{"id": 1, "name": "飞机"}, {"id": 2, "name": "火车"}, {"id": 3, "name": "自驾"}];
            $.wyui.postMethod(urlConfig.crm.exhibition.getSalerBySalerSupport, {
                userId: getCurrentUser().id
            }, function (list) {
                that.salerList = list;
            });

            $(".select2").select2();

            $(".toSeller").select2().on('select2:select', function (e) {
                that.customerInfo.createUserId = $(this).val();
            });
            validate();
        }
    });
    function validate() {
        $("input[name='participationNum'],input[name='stayNum']").on("keyup", function () {
            //如果输入非数字，则替换为''
            this.value = this.value.replace(/[^\d]/g, '');
            var reg = new RegExp("^\d{3}$");
            if (!reg.test(this.value)) {
                this.value = this.value.substr(0, 3);
            }
        });
        $("input[name='quote'],input[name='acceptPrice'],input[name='deposit']").on("keyup", function () {
            //如果输入非数字，则替换为''
            this.value = this.value.replace(/[^\d.]/g, "");
        });
    }
</script>
</body>
</html>